<template>
    <div style="margin: 20px 30px">
        <div v-for="(item, index) in list" :key="index" class="create_material_form">
            <div style="display:flex;align-items: center">
                <div v-if="title != null && title != '' && disabledAdd" style="flex: 1;font-size: 14px">{{ title }}</div>
                <div style="flex: 1;font-size: 14px">内容{{ index + 1 }}</div>
                <div style="flex: 5">
                    <el-radio-group v-model="item.contentType" @change="typeChangeHandle(index)">
                        <el-radio v-if="contentType.includes(1)" :label="1">文本</el-radio>
                        <el-radio v-if="contentType.includes(2)" :label="2">素材</el-radio>
                        <el-radio v-if="contentType.includes(3)" :label="3">链接</el-radio>
                    </el-radio-group>

                    <el-button type="text" v-if="list.length > 1" style="cursor:pointer"
                               class="el-icon-delete" @click="deleteContent(index)"></el-button>
                </div>
            </div>
            <div>
                <el-card v-if="item.contentType == '1'" class="taskContent">
                    <div slot="header" class="clearfix">
                        <div style="display:flex;align-items: center;">
                            <div style="font-size: 14px;">插入：</div>
                            <el-button v-if="insertName == 'all' || insertName == 'empName'" @click="item.content += '#员工名称#'" type="text" >员工名称</el-button>
                            <el-button v-if="insertName == 'all' || insertName == 'clientName'" @click="item.content += '#客户昵称#'" type="text" >客户昵称</el-button>
                        </div>
                    </div>
                    <div>
                        <el-input
                                style="width: 100%;height: 100%;"
                                type="textarea"
                                placeholder="请输入任务内容"
                                v-model="item.content"
                                maxlength="300"
                                show-word-limit>
                        </el-input>
                    </div>
                </el-card>
                <el-card v-if="item.contentType == '2'">
                    <div style="text-align: center;height: 100px;width: 100px;margin: 10px" v-if="item.material != null" @click="selectMaterialVisible = true">
                        <img style="height: 88px" :src="item.material.materialLinksCover" class="avatar">
                        <div style="font-size: 12px">{{ item.material.materialTitle }}</div>
                    </div>
                    <i v-else style="border: 1px dashed #8c939d;" class="el-icon-plus avatar-uploader-icon" @click="selectMaterialVisible = true"></i>

                    <el-dialog title="选择素材" :visible.sync="selectMaterialVisible" width="80%" :close-on-click-modal="false" :destroy-on-close="true" append-to-body>
                        <MaterialSelect @getData="getMaterialData($event, index)"/>
                    </el-dialog>
                </el-card>
                <div v-if="item.contentType == '3'">
                    <el-input type="text" placeholder="输入http开头或者https开头的链接（必填）" v-model="item.linkContent.linkAddress" maxlength="500" show-word-limit style="margin-top: 10px"></el-input>
                    <el-input type="text" placeholder="输入链接标题（必填)" v-model="item.linkContent.linkTitle" maxlength="200" show-word-limit style="margin-top: 10px"></el-input>
                    <el-input type="textarea" placeholder="输入内容简介（选填)" v-model="item.linkContent.content" maxlength="1000" show-word-limit style="margin-top: 10px"></el-input>
                </div>

            </div>
        </div>
        <el-button v-if="!disabledAdd" type="text" icon="el-icon-circle-plus-outline" @click="addContent">继续添加</el-button>
    </div>
</template>

<script>
import MaterialSelect from "@/components/material_select/material_select"
const initContent = {
    contentType: 1,
    content: '',
    material: null,
    linkContent: {
        linkAddress: '',
        linkTitle: '',
        content: ''
    }
}

export default {
    name: "material_content_text.vue",
    components: {
        MaterialSelect
    },
    props: {
        contentType: {
            type: Array,
            default: () => [1, 2, 3]
        },
        insertName: {
            type: String,
            default: "all"
        },
        disabledAdd: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            list: [{...initContent, contentType: this.contentType[0]}],
            selectMaterialVisible: false,
        }
    },
    methods: {
        addContent() {
            this.list.push({...initContent, contentType: this.contentType[0]})
        },
        deleteContent(index) {
            this.list.splice(index, 1)
        },
        loadData(data) {
            data = JSON.stringify(data)
            this.list = [{...JSON.parse(data)}]
        },
        initData() {
            let json = JSON.stringify({...initContent})
            let data = JSON.parse(json)
            this.list = [{...data}]
        },
        getMaterialData(data, index) {
            if (!data['materialLinksCover']) {
                data['materialLinksCover'] = require('@/assets/img/Pdf.png')
            }
            this['list'][index]['material'] = data
            this.selectMaterialVisible = false
        },
        getData() {
            return this['list']
        },
        typeChangeHandle(index) {
            this.list[index]['content'] = ""
            this.list[index]['material'] = null
            this.list[index]['linkContent'] = {
                linkAddress: '',
                linkTitle: '',
                content: ''
            }
        },
    }
}
</script>

<style>
.create_material_form .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.create_material_form .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.create_material_form .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.create_material_form .avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>

<style>
.taskContent .el-card__body {
    padding: 0;
}

.taskContent .el-textarea .el-textarea__inner {
    min-height: 150px !important;
}
</style>

<style scoped>
/deep/ .el-card__header {
    padding: 0 20px;
}
</style>
